<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style type="text/css">
        div.rotate1{
            width: 50px;
            height: 50px;
            background-color: #5fbcff;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(360deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(360deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
<div class="rotate1">123</div>
</body>
</html>